<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>梯梯</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/organzition.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
</head>
<style>
/*  .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th{
    border-bottom:0;
  }*/
 /* .layui-table td, .layui-table th{
    padding:14px 15px;
  }*/
.Property-right{
      margin-top:20px;
      height: 580px;
      flex:1;
      display: inline-block;
      margin-left: 30px;
      margin-right:30px;
 /*   display: none; */  
}
.right-top{
      width: 100%;
      height: 50px;
      background-color: #fff;
}
.pic-3{
      width: 26px;
      height: 26px;
      margin:10px;
      color: #E5BA70;
}
.pic-4{
      width: 26px;
      height:26px;
      margin:10px;
      color: #888;
}
.right-top .right{
     background-color: #fff;
     color: #888;
     display: inline-block;
  /*   float:right;*/
}
 .right-top .left-1,.right-top .left-2{
   /*float:left;*/
   color:#000;
   background-color: #fff;
 }
 .layui-table th{
   width:60px;
 }
 .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th{
  text-align:center;
  border:1px solid #888;
 }

  .layui-layer-iframe{
    border-radius:10px;
  }
 tr .check{
    width: 20px;
  }
  #page-num{
    display: inline-block;
 } 
 .layui-laypage a, .layui-laypage span{
  border:none;
  border-radius:30px;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height:20px;
  padding:0;
  margin-left:3px;
 }
 .layui-laypage>:first-child, .layui-laypage>:first-child em{
  border-radius:30px;
 }
.layui-laypage>:last-child, .layui-laypage>:last-child em{
  border-radius:30px; 
}
.layui-laypage .layui-laypage-curr .layui-laypage-em{
  border-radius:30px;
  background-color: #EF7632;
}
#page-fen{
    display: inline-block;
    float: right; 
}
#page-counter{
  display: inline-block;
}
#page-num{
display: inline-block;
margin-left:15px;
margin-right:30px;
}

/* 弹出框样式  */

#layui-layer1  .layui-layer-title{
  border-bottom:none;
  text-align: center;
  background-color: #fff;
  border-radius:10px;
}
/* 弹出框样式 */
body .layui-layer{
  border-radius:10px;
}
div.layui-layer-title {
  padding: 0;
  border-bottom: 0;
  background-color: #fff;
}
  
</style>
<body>
  <div class="container">
      <!-- 左边选项栏 -->
     <div class="org-floor">

<form class="org-search"  name="myform">
     <input type="text" name="name" id="name" value="按名字搜索..."  onfocus="this.style.color='#888'; this.value='';"  onblur="this.style.color='#ddd';  this.value='按名字搜索...'"  style="color:#bbb;"/>

          <button  onclick="getName()"><i class="layui-icon" style="font-size: 25px; color: #EF7632;">&#xe615;</i> </button> 
        </form>
        <div class="org-floorTree">
          <ul id="red" class="treeview-red">
            <li class="open"><span>海威 银泰国际</span>
              <ul>
                <li><span>1幢1单元</span></li>
                <li><span>1幢2单元</span></li>
                <li><span>1幢3单元</span></li>
                <li><span>2幢1单元</span></li>
                <li><span>2幢2单元</span></li>
                <li><span>3幢1单元</span></li>
              </ul>
            </li>
            <li><span>喜来登物业</span>
              <ul>
                <li><span>1幢1单元</span></li>
                <li><span>1幢2单元</span></li>
              </ul>
            </li>
            <li><span>东方群物业</span>
              <ul>
                <li><span>1幢1单元</span></li>
                <li><span>1幢2单元</span></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右边表格模块-->
     <!--  <img src="../images/small.jpg" height="600" width="900" alt="">  -->
      <div class="Property-right">
         <div class="right-top">
       <button class="layui-btn layui-btn-normal  left-1 "><span class="pic-3 iconfont icon-tianjiarenyuan"></span>添加成员</button>

         <button class="layui-btn layui-btn-normal  left-2"><span class="pic-3 iconfont icon-piliangdaoru"></span>批量导入</button>

        <button class="layui-btn layui-btn-danger  a4 right"><span class="pic-4 iconfont icon-shanchu"></span>删除</button>
        <button class="layui-btn layui-btn-normal  add right"><span class="pic-4 iconfont icon-modify"></span>修改</button>
           </div>
        <!--   table部分 -->
      <table class="layui-table" lay-skin="line">
      <thead >
         <tr>
           <th class="check"></th>
           <th>物业公司</th>
           <th>用户名称</th>
           <th>账号</th> 
           <th>账号角色</th> 
           <th>分管小区</th>
         </tr>
      </thead>
      <tbody class="org-table">
        <script type="text/html" id="tableTemp">
           <tr data-id={}>
          <td>1</td>
           <td class="check"><input type="checkbox" name="" title="" lay-skin="primary" checked></td>
           <td>三三</td>
           <td>000</td>
           <td>12306</td>
           <td>户主</td>
           </tr>
        </script>
      </tbody>
      </table>
    <div id="page-fen">
        <p id="page-counter">共有80条记录</p>
        <div id="page-num"></div>
    </div>
    </div>
  </div>
  <script src="../lib/jquery.js" type="text/javascript"></script>
  <script type="text/javascript" src="../layui/layui.js"></script>
  <script type="text/javascript" src="../js/organization.js"></script>
  <script src="../lib/js/jquery.cookie.js" type="text/javascript"></script>
  <script src="../lib/js/jquery.treeview.js" type="text/javascript"></script>
  <script>
  function getName(){     
  var name=myform.name.value;         
  console.log(name);
  }     
  //默认图片的加载
/* window.onload=function(){
       $(".treeview>li>ul>li").click(function(){
    $("img").hide();
    $(".section-right").show();
  })
  }*/
 //默认图片的加载
 layui.use(['jquery','form','laypage','layer'], function(){
            var $ = layui.jquery,
                layer = layui.layer,
                laypage = layui.laypage;
 /*分页js的实现*/
 laypage({
    cont: 'page-num'
    ,pages: 8
    ,first: 1
    ,last:false
    ,groups:6
    ,prev: '<em><</em>'
    ,next: '<em>></em>'
  });
        });
/*分页js的实现*/
    $(function(){
      $("#red").treeview({
        animated: "fast",
        collapsed: true,
        unique: true,
        persist: "cookie",
        toggle: function() {
        }
      });
      layui.use(['jquery','element','layer'], function(){
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        
        var a = {count: 5};
        searchTable(a);
        function searchTable(param){
          $.ajax({
          url: 'http://api.douban.com/v2/movie/in_theaters',
          type: 'get',
          dataType: 'jsonp',
          data: param || {},
        })
        .done(function(data){
          console.log(data);
          var str= '';
          if(data.subjects.length){
            for(var i=0;i<data.subjects.length;i++){
            str +=
            '<tr>'+
            '<td class="check"><input type="checkbox" name="" title="" lay-skin="primary" checked></td>'+
            '<td>'+ data.subjects[i].title +'</td>'+
            '<td>'+ data.subjects[i].year +'</td>'+
            '<td>'+ data.subjects[i].subtype +'</td>'+
            '<td>'+ data.subjects[i].title +'</td>'+
             '<td>'+ data.subjects[i].subtype +'</td>'+
            '</tr>'
          }
          $(".org-table").html(str);
        }else{
          str = '<tr><td colspan="7">暂无数据</td></tr>';
          $(".org-table").html(str);
        }
        })
        .fail(function() {
          console.log("error");
        });
        }
      });
      $(".treeview>li>ul>li").click(function(){
        console.log(123);
        $(".treeview>li>ul>li").css({"backgroundColor":"#FDF9F0","color":"#888"});
        $(this).css({"backgroundColor":"#EF7632","color":"#fff","border-radius":"5px"});
      });
    })
  </script>

</body>
</html>
